<template>
	<view class="wrap">
		<view class="body-wrap">
			<view class="head">
				<!-- <image src="../../static/company_default.png" mode=""></image> -->
				<view class="line">{{info.shippingCity}} - {{info.receiptCity}}</view>
			</view>
			<view class="content">
				<view class="title">
					<view>基本信息</view>
				</view>
				<view class="info">
					<view class="item">
						<view class="gray">任务名称：</view>
						<view class="black">{{info.goodsName}} - 运输</view>
					</view>
					<view class="item">
						<view class="gray">装货时间：</view>
						<view class="black">{{info.planBeginTime}}</view>
					</view>
					<view class="item">
						<view class="gray">任务截止时间：</view>
						<view class="black">{{info.planEndTime}}</view>
					</view>
					<view class="item">
						<view class="gray">发布单位：</view>
						<view class="black">{{info.orgName}}</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="title">
					<view>托运人信息</view>
				</view>
				<view class="info">
					<view class="item">
						<view class="gray">托运人单位：</view>
						<view class="black">{{info.shippingUserUnit}}</view>
					</view>
					<view class="item">
						<view class="gray">托运人：</view>
						<view class="black">{{info.shippingUserName}}</view>
					</view>
					<view class="item">
						<view class="gray">托运人手机：</view>
						<view class="black">{{info.shippingUserTel}}</view>
					</view>
					<view class="item">
						<view class="gray">装货地址：</view>
						<view class="black">{{info.shippingCity}}{{info.shippingAddress}}</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="title">
					<view>收货人信息</view>
				</view>
				<view class="info">
					<view class="item">
						<view class="gray">收货人单位：</view>
						<view class="black">{{info.receiptUserTel}}</view>
					</view>
					<view class="item">
						<view class="gray">收货人：</view>
						<view class="black">{{info.receiptUserName}}</view>
					</view>
					<view class="item">
						<view class="gray">收货人手机：</view>
						<view class="black">{{info.receiptUserTel}}</view>
					</view>
					<view class="item">
						<view class="gray">卸货地址：</view>
						<view class="black">{{info.receiptCity}}{{info.receiptAddress}}</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="title">
					<view>货物信息</view>
				</view>
				<view class="info">
					<view class="item">
						<view class="gray">货物名称：</view>
						<view class="black">{{info.goodsName}}</view>
					</view>
					<view class="item">
						<view class="gray">计划运输数量：</view>
						<view class="black">{{info.planShippingNum}}</view>
					</view>
					<view class="item">
						<view class="gray">计量单位：</view>
						<view class="black" v-text="computeUnit(info.unit)"></view>
					</view>
					<view class="item" v-if="info.unitPriceDisplay == 1">
						<view class="gray">运输单价：</view>
						<view class="black">{{info.shippingPrice}}</view>
					</view>
					<view class="item">
						<view class="gray">已接单：</view>
						<view class="black">{{computePercent}}</view>
					</view>
				</view>
			</view>
			<view class="content" v-if="info.goodsRemarks">
				<view class="title">
					<view>备注信息</view>
				</view>
				<view class="info">
					<view class="item">{{info.goodsRemarks}}</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btnBox">
				<view class="reject btn" @click="back">返回</view>
				<view class="pass btn" :class="{'disable':!planShippingNumFlag}" @click="onTake">抢单</view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="center">
			<view class="popup-wrap">
				<view class="item">
					<view style="margin-right: 24rpx;"><text>*</text> 数量:</view>
					<view class="flex">
						<input v-model="quantity" :disabled="pricingMethodFlag" class="input" type="digit" placeholder="输入数量">
						<view>{{computeUnit(unit)}}/车</view>
					</view>
				</view>
				<view class="item">
					<view style="margin-right: 24rpx;"><text>*</text> 车辆:</view>
					<view class="flex">
						<view class="input">
							<picker @change="bindPickerChange" :value="vehicleIndex" :range="vehicleArray">
								<view :style="{ color: plate == '请选择' ? '#999999' : '#333333' }">{{plate}}</view>
							</picker>
						</view>
						<view class="add" @click="goAdd">+新增车辆</view>
					</view>
				</view>
				<view class="item" style="margin-bottom: 20rpx;margin-top: 20rpx; align-items: center;">
					<checkbox :checked="issigncheckbox" style="transform:scale(0.7)" @click="signcheckbox()"></checkbox>
					<view style="font-weight: bold;font-size: 26rpx;" @click="opensign()">我已同意签订该合约</view>
				</view>
				<view class="btn-box">
					<view class="cancel" @click="onCancel">取消</view>
					<view class="confirm" @click="postGoodsReceive">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				// #ifdef MP-WEIXIN
				info: null,
				// #endif
				// #ifdef APP-PLUS
				info: {},
				// #endif
				list: [],
				planShippingNum: 0,
				planShippingNumFlag: true,
				computePercent: '0%',
				
				quantity: '',
				vehicleId: '',
				plate: '请选择',
				currentVehicle: [],
				vehicleArray: [],
				vehicleIndex: 0,
				
				unit: '',
				pricingMethodFlag: false,
				goodsLoad: '',
				
				issigncheckbox: true,
				etpId: '',
				etpName: '',
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getDetail()
		},
		methods: {
			opensign() {
				if(!this.vehicleId){
					uni.showToast({
						title: '请先选择车辆',
						icon: 'none'
					});
					return
				}
				uni.navigateTo({
					url: `../task/singlesign?loadingOrderId=${this.id}&&flag=true&&vehicleId=${this.vehicleId}`
				});
			},
			signcheckbox: function() {
				this.issigncheckbox = !this.issigncheckbox;
			},
			computeUnit(str) {
				if(str == 1) return '吨'
				if(str == 2) return '件'
				if(str == 3) return '箱'
				if(str == 4) return '立方'
				if(str == 5) return '车'
			},
			getDetail() {
				this.wxRequest({
					url: `${this.API}/waybill/queryById?id=${this.id}`,
					method: 'GET',
					header: {
						'authorization': uni.getStorageSync(this.DATA_KEY.token),
					},
					title: '加载中...',
					success: res => {
						console.log(res)
						this.info = res.data.data
						this.etpId = res.data.data.orgId
						this.etpName = res.data.data.orgName
						this.list = res.data.data.loadingOrderList
						if(this.list.length) {
							this.list.forEach(item => {
								this.planShippingNum += item.planShippingNum
							})
							this.planShippingNumFlag = this.planShippingNum >= this.info.planShippingNum ? false : true
							this.computePercent = (this.planShippingNum/this.info.planShippingNum *100).toFixed(2) + '%'
						}
						console.log(this.computePercent)
					},
					fail: e => {
						console.log(e);
					}
				});
			},
			onTake() {
				this.wxRequest({
					url: `${this.API}/blacklist/queryBlacklist`,
					method: 'POST',
					data: {
						etpId: this.etpId,
						typeId: "1", //id类型 1司机 2车辆
						driverVehicleId: uni.getStorageSync(this.DATA_KEY.userInfo).driverId
					},
					success:res => {
						if(res.data.data){
							uni.showModal({
								title: '禁止接单',
								content: `您已被${this.etpName}列为黑名单`,
								showCancel: false,
								confirmText: '确定',
								confirmColor: '#49A9F0',
								success: function (res) {
									
								}
							});
						}else {
							if (this.info.planShippingNum - this.info.shippedNum <= 0) return
							this.unit = this.info.unit
							if(this.info.pricingMethod == 2 && this.info.goodsLoad){
								this.pricingMethodFlag = true
								this.quantity = this.info.goodsLoad
							}
							this.$refs.popup.open()
							this.oncarlist()
						}
					}
				});
			},
			postGoodsReceive() {
				if (!this.quantity) {
					uni.showToast({
						title: '请先输入数量',
						icon: 'none'
					});
					return
				}
				if (!this.vehicleId) {
					uni.showToast({
						title: '请先选择车辆',
						icon: 'none'
					});
					return
				}
				if(!this.issigncheckbox){
					uni.showToast({
						title: '请勾选同意相关选项',
						icon: 'none'
					});
					return
				}
				this.getGoodsValidation()
			},
			goodsReceive() {
				this.wxRequest({
					url: `${this.API}/miniApp/loadingOrder/goodsReceive`,
					method: 'POST',
					data: {
						waybillId: this.id, //运单id
						driverId: uni.getStorageSync(this.DATA_KEY.userInfo).driverId, //司机id
						vehicleId: this.vehicleId, //车辆id
						quantity: this.quantity, //数量
						// #ifdef MP-WEIXIN
						clickLocation: "2" //数据来源1.APP 2.小程序
						// #endif
						// #ifdef APP-PLUS
						clickLocation: "1" //数据来源1.APP 2.小程序
						// #endif
					},
					header: {
						'authorization': uni.getStorageSync(this.DATA_KEY.token),
					},
					title: '加载中...',
					success: res => {
						this.onCancel()
						uni.showToast({
							title: '抢单成功',
							icon: 'none'
						});
						uni.navigateBack()
					},
					fail: e => {
						console.log(e);
					}
				});
			},
			getGoodsValidation() {
				this.wxRequest({
					url: `${this.API}/miniApp/loadingOrder/goodsValidation?waybillId=${this.id}&quantity=${this.quantity}`,
					method: 'GET',
					header: {
						'authorization': uni.getStorageSync(this.DATA_KEY.token),
					},
					title: '加载中...',
					success: res => {
						this.goodsReceive()
					},
					fail: e => {
						console.log(e);
					}
				});
			},
			//	查询车辆列表
			oncarlist() {
				let driverId = uni.getStorageSync(this.DATA_KEY.userInfo).driverId;
				this.wxRequest({
					url: `${this.API}/driverService/getDriverVehicle?driver_id=` + driverId + '&etp_id=' + uni.getStorageSync(this.DATA_KEY.etpId),
					method: 'POST',
					title: '加载中...',
					success: res => {
						this.currentVehicle = res.data.data.currentList
						this.vehicleArray = []
						this.currentVehicle.forEach(item => {
							this.vehicleArray.push(item.plateNum)
						})
					}
				});
			},
			bindPickerChange(e) {
				this.vehicleIndex = e.detail.value
				this.plate = this.vehicleArray[this.vehicleIndex]
				let arr = this.currentVehicle.filter(item => {
					return item.plateNum === this.plate
				})
				this.vehicleId = arr[0].vehicleId
				console.log(this.vehicleId)
				console.log(this.etpId)
				console.log(this.etpName)
				this.wxRequest({
					url: `${this.API}/blacklist/queryBlacklist`,
					method: 'POST',
					data: {
						etpId: this.etpId,
						typeId: "2", //id类型 1司机 2车辆
						driverVehicleId: this.vehicleId
					},
					success:res => {
						if(res.data.data){
							this.$refs.popup.close()
							uni.showModal({
								title: '禁止接单',
								content: `车辆：${this.plate}已被${this.etpName}列为黑名单，请更换其他车辆`,
								showCancel: false,
								confirmText: '确定',
								confirmColor: '#49A9F0',
								success: res => {
									this.onCancel()
								}
							});
						}
					}
				});
			},
			onCancel() {
				this.plate = '请选择'
				this.vehicleIndex = 0
				this.quantity = ''
				this.pricingMethodFlag = false
				this.$refs.popup.close()
			},
			goAdd() {
				uni.navigateTo({
					url: '/pages/vehicle/vehicleinformation?vehicleId=0',
				})
			},
			back() {
				uni.navigateBack()
			},
			selectTeam(num) {
				console.log(num)
			}
		}
	}
</script>

<style lang="scss">
	.popup-wrap {
		background: #fff;
		border-radius: 10rpx;
		padding: 48rpx;
	
		.btn-box {
			display: flex;
			align-items: center;
			justify-content: center;
	
			view {
				padding: 10rpx 48rpx;
				color: #fff;
				border-radius: 8rpx;
				font-size: 28rpx;
			}
	
			.cancel {
				background: #ccc;
				margin-right: 32rpx;
			}
	
			.confirm {
				background: #4089ff;
			}
		}
	
		.item {
			display: flex;
			align-items: center;
			margin-bottom: 48rpx;
			font-size: 28rpx;
			color: #333;
	
			text {
				color: #ff0000;
			}
	
			.input {
				width: 200rpx;
				height: 58rpx;
				border: 1rpx solid #eee;
				font-size: 28rpx;
				padding: 0 32rpx;
				margin-right: 24rpx;
				line-height: 58rpx;
			}
	
			.add {
				color: #4089ff;
			}
		}
	
		.flex {
			display: flex;
			align-items: center;
		}
	}
	.wrap{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 0 0 calc(80rpx + env(safe-area-inset-bottom));
	}
	.head{
		background: #fff;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		padding: 24rpx 0;
		image{
			width: 100rpx;
			height: 100rpx;
		}
		.line{
			margin-top: 20rpx;
		}
	}
	.body-wrap{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		overflow: auto;
		.content{
			padding: 0 24rpx;
			background: #fff;
			margin: 24rpx 0;
			border-radius: 10rpx;
			.title {
				padding: 16rpx 0 16rpx 24rpx;
				font-size: 34rpx;
				font-weight: 500;
				color: #333;
				border-bottom: 1rpx solid #F5F7FB;
				position: relative;
				display: flex;
				align-items: center;
				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: 24rpx;
					width: 8rpx;
					height: 32rpx;
					background: #4089ff;
				}
			}
			.info {
				padding: 12rpx 0;
				.name {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					line-height: 66rpx;
				}
		
			}
			.item {
				display: flex;
				align-items: baseline;
				justify-content: space-between;
				padding: 12rpx 0;
				font-size: 30rpx;
			
				.gray {
					font-weight: 400;
					color: #9E9E9E;
					width: 39%;
				}
			
				.black {
					width: 60%;
					font-weight: 500;
					color: #333333;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
		}
	}
	.footer {
		position: absolute;
		bottom: calc(env(safe-area-inset-bottom));
		width: calc(100%);
		box-sizing: border-box;
		.btnBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	
		.btn {
			font-size: 30rpx;
			font-weight: 500;
			line-height: 80rpx;
			// border-radius: 12rpx;
			text-align: center;
			box-shadow: 0 0 20rpx 12rpx rgba(0, 62, 129, 0.04);
		}
	
		.reject {
			color: #333333;
			width: 50%;
			background: #fff;
		}
	
		.pass {
			width: 55%;
			color: #FFFFFF;
			background: #4089ff;
			&.disable{
				background: #ccc;
			}
		}
	}
</style>